<template>
  <div>
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <el-row :gutter="10">
            <el-col :span="3">
              <el-select v-model="searchForm.articleTypeId" style="width: 100%" size="large">
                <el-option label="全部类别" :value="''" />
                <el-option v-for="item in typeList" :key="item.articleTypeId" :label="item.articleTypeName"
                  :value="item.articleTypeId" />
              </el-select>
            </el-col>
            <el-col :span="5">
              <el-input v-model="searchForm.key" size="large" clearable placeholder="模糊匹配姓名和手机"></el-input>
            </el-col>
            <el-col :span="2">
              <el-button @click="doSearch()" size="large">搜素</el-button>
            </el-col>
            <el-col :span="14" style="display: flex; justify-content: flex-end;">
              <el-button @click="dialog.title = '添加'; dialog.form = {}; dialog.open = true;" size="large">添加</el-button>
            </el-col>
          </el-row>
        </div>
      </template>
      <el-table :data="data.page.records" style="width: 100%">
        <el-table-column label="#" width="70" align="center">
          <template #default="scope">{{ scope.$index + 1 }}</template>
        </el-table-column>
        <el-table-column prop="articleTitle" label="标题" />
        <el-table-column prop="articleWorker" label="作者" width="120" align="center" />
        <el-table-column prop="articleTime" label="发布时间" width="160" align="center" />

        <el-table-column label="操作" align="center" width="120">
          <template #default="scope">
            <el-button-group>
              <el-button size="small" type="warning"
              @click="dialog.title = '修改'; dialog.form = {...scope.row}; dialog.open = true;"
              >
                修改
              </el-button>
              <el-button size="small" type="danger" @click="doDelete(scope.row)">删除</el-button>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>


    </el-card>

    <el-pagination style="justify-content: center;" v-model:currentPage="data.params.current"
      v-model:page-size="data.params.size" :page-sizes="[10, 20, 50]" background
      layout="total, sizes, prev, pager, next, jumper" :total="Number(data.page.total)" @size-change="doPage(1);"
      @current-change="doPage();" />



    <!-- 添加|修改 对话框 -->
    <el-dialog v-model="dialog.open" :title="dialog.title + '对话框'" width="90%" draggable>
      <el-form ref="dialogForm" :model="dialog.form" label-width="8em" label-position="right" size="large" status-icon>

        <el-form-item label="文章标题" prop="articleTitle" :rules="[
          { required: true, message: '文章标题必填' },
        ]">
          <el-input v-model="dialog.form.articleTitle" />
        </el-form-item>
        <el-row>
          <el-col :span="10">
            <el-form-item label="文章类别" prop="articleTypeId" :rules="[
              { required: true, message: '文章类别必选' },
            ]">
              <el-select v-model="dialog.form.articleTypeId" style="width: 100%">
                <el-option v-for="item in typeList" :key="item.articleTypeId" :label="item.articleTypeName"
                  :value="item.articleTypeId" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="14">
            <el-form-item label="作者" prop="articleWorker" :rules="[
              { required: true, message: '作者必填' },
            ]">
              <el-input v-model="dialog.form.articleWorker" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="文章内容" prop="articleContent" :rules="[
          { required: true, message: '文章内容必填' },
        ]">
          <!-- <el-input v-model="dialog.form.articleContent" type="textarea" :rows="15" /> -->
          <w-editor v-model="dialog.form.articleContent" style="height:500px;"></w-editor>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="doSubmit">{{ dialog.title }}</el-button>
        </span>
      </template>
    </el-dialog>


  </div>
</template>




<script setup>
import { ref, onMounted, reactive } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { Plus } from "@element-plus/icons-vue";
import WEditor from "@/components/WEditor.vue";

import articleApi from "@/api/cms/ArticleApi";
import articleTypeApi from "@/api/cms/ArticleTypeApi";

// const roleList = reactive({});
const data = reactive({
  params: {
    current: 1,//当前页码
    size: 10,//每页最大数
  },
  page: {//分页结果
    total: 0,//总记录数
    records: [],//记录
  }
}); //定义复制的响应式数据

//带条件的分页查询
const typeList = ref([]);
const searchForm = ref({ articleTypeId: '', key: '' });
const doSearch = () => {
  data.params = { ...data.params, ...searchForm.value };//
  doPage(1);
}

/**
 * 加载第p页数据
 * @param {Number} p 
 */
const doPage = (p) => {
  if (p) {
    data.params.current = p
  }
  articleApi.page(data.params).then(r => {
    data.page = r.data.data;
  });
}


/**
 * 组件挂载事件
 */
onMounted(() => {
  doPage(1);
  articleTypeApi.list().then(r => {
    typeList.value = r.data.data;
  });
});



// 删除处理
const doDelete = (row) => {
  ElMessageBox.confirm(`您确定要删除[${row.articleTitle}]吗?`, "删除确认")
    .then(() => {
      return articleApi.delete(row.articleId);
    })
    .then((r) => {
      if (r.data.ok) {
        ElMessage.success("删除成功"); //1.成功提示
        doPage(1); //2.调用加载数据的方法,刷新页面数据
      }
    });
};


//添加|修改 对话框
const dialog = reactive({
  title: "添加",
  open: false, //对话框是否打开的
  form: {},
});
const dialogForm = ref(null);
const doSubmit = () => {
  console.debug(dialogForm.value);
  dialogForm.value.validate((valid) => {
    if (valid) {
      //校验成功
      let doit = dialog.title=='添加'?articleApi.add:articleApi.update;
      doit(dialog.form).then((r) => {
        if (r.data.ok) {
          ElMessage.success(dialog.title+"成功"); //1.成功提示
          doPage(1); //2.调用加载数据的方法,刷新页面数据
          dialogForm.value.resetFields(); //3.重置表单
          dialog.open = false; //4.关闭对话框
        }
      });
    } else {
      ElMessage.error("校验失败");
    }
  });
};

</script>

<style  scoped>
.box-card {
  width: 96%;
  margin: 1rem auto;
}
</style>